<template>
  <div class="update-avatar">
    <!-- 导航栏 -->
    <van-nav-bar
      title="历史"
      left-arrow
      class="page-nav-bar"
      @click-left="$router.back()"
    />

    <div class="top">
      <!-- 列表 -->
      <van-list
        :error.sync="isError"
        error-text="加载失败，点击重新加载"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArtItem
          v-for="art in userCollection"
          :key="art.art_id"
          :article="art"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import { getUserHistories } from '@/api/user'
import ArtItem from '@/components/article-item'
export default {
  name: 'History',
  components: { ArtItem },

  data () {
    return {
      userCollection: [],
      loading: false,
      finished: false,
      isError: false,
      q: {
        page: 1,
        per_page: 10
      }
    }
  },

  mounted () {},

  methods: {
    async onLoad () {
      try {
        // 异步更新数据
        // 获取用户收藏列表
        const res = await getUserHistories(this.q)
        this.userCollection.push(...res.data.data.results)
        console.log(res)
        // 手动将加载状态改成false，代表加载完毕
        this.loading = false
        this.q.page += 1
        if (res.data.data.results.length < this.q.per_page) {
          this.finished = true
        }
      } catch (error) {
        console.log('出错了：', error.message)
        // 显示 加载错误提示
        this.isError = true
        // 关闭加载状态
        this.loading = false
        this.finished = true
      }
    }
  },

  async created () {}
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #0094ff;
  position: fixed;
  width: 100%;
  // .van-nav-bar__text {
  //   color: #fff;
  // }
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
.top {
  padding-top: 90px;
}
</style>
